import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { TabBar, Header, RouterView } from 'src/components'
import { imgBaseUrl } from 'src/config/env'
import routerData from './routerData'
import './index.scss'

// 我的
const Profile = () => {
    const { userInfo } = useSelector(state => state);
    const [username, setUsername] = useState('登录/注册')
    const [mobile, setMobile] = useState('暂无绑定手机号')
    const [balance, setBalance] = useState(0)
    const [count, setCount] = useState(0)
    const [pointNumber, setPointNumber] = useState(0)
    const [avatar, setAvatar] = useState('')

    useEffect(() => {
        const initData = () => {
            if (userInfo && userInfo.user_id) {
                setAvatar(userInfo.avatar)
                setUsername(userInfo.username)
                setMobile(userInfo.mobile || '暂无绑定手机号')
                setBalance(userInfo.balance)
                setCount(userInfo.gift_amount)
                setPointNumber(userInfo.point)
            } else {
                setUsername('登录/注册')
                setMobile('暂无绑定手机号')
            }
        }
        initData()
    }, [userInfo])

    return <div className="page_profile">
        <Header goBack title="我的" />
        <section>
            <section className="profile-number">
                <Link to={userInfo && userInfo.user_id ? '/profile/info' : '/login'}
                    className="profile-link">
                    {
                        userInfo && userInfo.user_id ? <img
                            src={`${imgBaseUrl}${avatar}`}
                            className="privateImage"
                            alt=""
                        /> :
                            <span className="privateImage">
                                <svg className="privateImage-svg">
                                    <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#avatar-default"></use>
                                </svg>
                            </span>
                    }
                    <div className="user-info">
                        <p>{username}</p>
                        <p>
                            <span className="user-icon">
                                <svg className="icon-mobile" fill="#fff">
                                    <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#mobile"></use>
                                </svg>
                            </span>
                            <span className="icon-mobile-number">{mobile}</span>
                        </p>
                    </div>
                    <span className="arrow">
                        <svg className="arrow-svg" fill="#fff">
                            <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#arrow-right"></use>
                        </svg>
                    </span>
                </Link>
            </section>
            <section className="info-data">
                <ul className="clear">
                    <li className="info-data-link">
                        <Link to="/balance">
                            <span className="info-data-top"><b>{parseInt(balance).toFixed(2)}</b>元</span>
                            <span className="info-data-bottom">我的余额</span>
                        </Link>
                    </li>
                    <li className="info-data-link">
                        <Link to="/benefit">
                            <span className="info-data-top"><b>{count}</b>个</span>
                            <span className="info-data-bottom">我的优惠</span>
                        </Link>
                    </li>
                    <li className="info-data-link">
                        <Link to="/points">
                            <span className="info-data-top"><b>{pointNumber}</b>分</span>
                            <span className="info-data-bottom">我的积分</span>
                        </Link>
                    </li>
                </ul>
            </section>
            <section className="profile-1reTe">
                {/* <!-- 我的订单 --> */}
                <Link to='/order' className="myorder">
                    <aside>
                        <svg fill="#4aa5f0">
                            <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#order"></use>
                        </svg>
                    </aside>
                    <div className="myorder-div">
                        <span>我的订单</span>
                        <span className="myorder-divsvg">
                            <svg fill="#bbb">
                                <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#arrow-right"></use>
                            </svg>
                        </span>
                    </div>
                </Link>
                {/* <!-- 积分商城 --> */}
                <a href='https://home.m.duiba.com.cn/#/chome/index' className="myorder">
                    <aside>
                        <svg fill="#fc7b53">
                            <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#point"></use>
                        </svg>
                    </aside>
                    <div className="myorder-div">
                        <span>积分商城</span>
                        <span className="myorder-divsvg">
                            <svg fill="#bbb">
                                <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#arrow-right"></use>
                            </svg>
                        </span>
                    </div>
                </a>
                {/* <!-- 饿了么会员卡 --> */}
                <Link to='/vipcard' className="myorder">
                    <aside>
                        <svg fill="#ffc636">
                            <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#vip"></use>
                        </svg>
                    </aside>
                    <div className="myorder-div">
                        <span>饿了么会员卡</span>
                        <span className="myorder-divsvg">
                            <svg fill="#bbb">
                                <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#arrow-right"></use>
                            </svg>
                        </span>
                    </div>
                </Link>
            </section>
            <section className="profile-1reTe">
                {/* <!-- 服务中心 --> */}
                <Link to='/service' className="myorder">
                    <aside>
                        <svg fill="#4aa5f0">
                            <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#service"></use>
                        </svg>
                    </aside>
                    <div className="myorder-div">
                        <span>服务中心</span>
                        <span className="myorder-divsvg">
                            <svg fill="#bbb">
                                <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#arrow-right"></use>
                            </svg>
                        </span>
                    </div>
                </Link>
                {/* <!-- 下载饿了么APP --> */}
                <Link to='/download' className="myorder">
                    <aside>
                        <svg fill="#3cabff">
                            <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#download"></use>
                        </svg>
                    </aside>
                    <div className="myorder-div" style={{
                        borderBottom: 0
                    }}>
                        <span>下载饿了么APP</span>
                        <span className="myorder-divsvg">
                            <svg fill="#bbb">
                                <use xmlnsXlink="http://www.w3.org/1999/xlink" xlinkHref="#arrow-right"></use>
                            </svg>
                        </span>
                    </div>
                </Link>
            </section>
        </section>
        <TabBar />

        <RouterView data={routerData} />

    </div>
}

export default Profile